<template>
  <div class="home">
    <HomeTop style="position: sticky;top: 0;z-index: 10;" />
    <div style="background: white;min-height: 80vh;padding: 30px;">
      <div class="importance-buttons">
        <button @click="filterByImportance(-1)" class="importance-button importance4" :class="{ selected: selectedImportance === -1 }">全部笔记</button>
        <button @click="filterByImportance(0)" class="importance-button importance1" :class="{ selected: selectedImportance === 0 }">重要等级1</button>
        <button @click="filterByImportance(1)" class="importance-button importance2" :class="{ selected: selectedImportance === 1 }">重要等级2</button>
        <button @click="filterByImportance(2)" class="importance-button importance3" :class="{ selected: selectedImportance === 2 }">重要等级3</button>
      </div>
      <div class="note-list">
        <NoteCard v-for="(note, index) in notes" :key="index" :id="note.id" :title="note.title" :content="note.content"
          :tags="note.tags" :importance = "note.importance" style="position: relative;"/>
      </div>

      <button @click="goToWriteNote" class="write-note-button">写笔记</button>
    </div>
  </div>
</template>





<script>
import NoteCard from './components/noteCard.vue';
import Tesseract from 'tesseract.js';
import { newPage } from '@/utils/commonFunction';
import HomeTop from '../../components/HomeTop.vue'
import request from '@/utils/request';
export default {
  name: 'Home',
  components: {
    HomeTop,
    NoteCard
  },
  data() {
    return {
      pageNum: 1,
      selectedImportance: -1,
      notes: [
        
      ],
      ocrResult: '',
      progress: null
    };
  },
  created() {
    this.filterByImportance(-1);
  },
  methods: {
    goToWriteNote() {
      sessionStorage.setItem('note', JSON.stringify(""));
      newPage('/note/write');
    },
    filterByImportance(importance) {
      this.pageNum = 1;
      this.selectedImportance = importance;
      var params = {
        pageNum: this.pageNum,
        importance : importance
      }
      this.getNoteList(params);
    },
    getNoteList(params) {
      const userId = JSON.parse(localStorage.getItem('userInfo')).id;
      request.get(`/notes/user/${userId}`, {
        params: params
      }).then(res => {
          if (res.code === 200) {
            this.notes = res.data.map(item => {
              return {
                id: item.id,
                title: item.title,
                content: item.content,
                tags: item.tags.split(';'),
                importance: item.importance
              }
            });
            this.pageNum += 1;
          }
        }).catch(err => {
          console.error('获取笔记列表失败', err);
        });
    },
  }
};
</script>

<style scoped>
.home {
  font-family: Arial, sans-serif;
  color: #333;
  padding: 100px 100px 0 100px;
  background-image: url('../../assets/image/back.png');
  /* 替换为你的背景图片 URL */
  background-size: cover;
  /* 确保图片覆盖整个容器 */
  background-position: center;
  /* 图片居中显示 */
  /* background-repeat: no-repeat; */
  /* 防止图片重复 */
  /* height: 100vh; */
  /* 高度占满视口 */
}

nav {
  background-color: #4CAF50;
  padding: 10px 20px;
  text-align: center;
  border-radius: 5px;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

nav a:hover {
  text-decoration: underline;
}

.note-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

NoteCard {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 15px;
  transition: transform 0.2s;
}

NoteCard:hover {
  transform: translateY(-5px);
}

NoteCard h3 {
  font-size: 20px;
  color: #4CAF50;
}

NoteCard p {
  font-size: 16px;
  color: #555;
}

NoteCard .tags {
  margin-top: 10px;
  font-size: 14px;
  color: #777;
}

NoteCard .tags span {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
  margin-right: 5px;
}

.write-note-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 15px 20px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.write-note-button:hover {
  background-color: #45a049;
  transform: translateY(-2px);
}

.importance-button {
  padding: 10px;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.importance1 {
    background: rgba(255, 77, 79, 0.7) !important;
}

.importance2 {
    background: rgba(250, 173, 20, 0.7) !important;
}

.importance3 {
    background: rgba(82, 196, 26, 0.7) !important;
}

.importance4 {
    background: rgba(191, 191, 191, 0.7) !important;
}
.importance-button:hover {
  opacity: 0.8;
}
.importance-button.selected {
  background: linear-gradient(45deg, #00bcd4, #4CAF50); /* 渐变背景 */
  color: white; /* 选中时的字体颜色 */
  border-color: #4CAF50; /* 选中时的边框颜色 */
  transform: scale(1.05); /* 选中时放大按钮 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 选中时的阴影效果 */
  font-size: 24px;
}
</style>